/*
    2.3 Component
        2.3.1 Owl Carousel
        
 */

//owl carousel
.owl-nav {
    .owl-prev {
        position: absolute;
        top: 35%;
        left: -30px;
        width: 40px;
        height: 40px;
        text-align: center;
        background: #fff;
        border-radius: 50%;
        line-height: 40px;
        border: 1px solid #f6f6f6;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        &:after {
            content: "\f053";
            font-family: FontAwesome;
            font-size: 12px;
        }
        @media (min-width: $screen-sm)and (max-width: $screen-md-max) {
            left: 0;
        }
        @media (max-width:$screen-md) {
            left: 15px;
        }
    }
    .owl-next {
        position: absolute;
        top: 35%;
        right: -30px;
        width: 40px;
        height: 40px;
        text-align: center;
        background: #fff;
        border-radius: 50%;
        line-height: 40px;
        border: 1px solid #f6f6f6;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        &:after {
            content: "\f054";
            font-family: FontAwesome;
            font-size: 12px;
        }
        @media (min-width: $screen-sm)and (max-width: $screen-md-max) {
            right: 0;
        }
        @media (max-width:$screen-md) {
            right: 15px;
        }
    }
}

div.brand .owl-item {}

div.brand .owl-theme .item {
    text-align: center;
}

.owl-carousel .owl-item img {
    display: block;
    width: initial;
}